<template>
  <div>
    <el-form>
      <el-row :gutter="20">
          <el-col :span="6" :offset="0">
              <el-form-item label="商品：">
                  <el-input v-model="purchase.number" placeholder="条码、名称、规格、型号、颜色"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
              <el-form-item label="类别：">
                  <el-input v-model="purchase.commodities"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
              <el-form-item label="仓库：">
                <el-select v-model="purchase.supId">
                    <el-option v-for="item in suppliers" :key="item.supId" :label="item.supName"
                        :value="item.supId" />
                    </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
              <el-form-item>
                  <el-button type="primary" @click="init">查询</el-button>
                  <el-button @click="cz">重置</el-button>
                  <a style="margin-left: 8px;" @click="ss">
                      {{linkText}}
                      <i class="anticon anticon-down" v-show="!isDivVisible">
                          <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg>
                      </i>
                      <i class="anticon" v-show="isDivVisible">
                          <svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg>
                      </i>
                  </a>
              </el-form-item>
          </el-col>
      </el-row>
      <div v-show="isDivVisible">
          <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                  <el-form-item label="序列号：">
                      <el-select v-model="purchase.supId">
                          <el-option v-for="item in suppliers" :key="item.supId" :label="item.supName"
                              :value="item.supId" />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                  <el-form-item label="批号：">
                      <el-select v-model="purchase.userId">
                          <el-option v-for="item in users" :key="item.value" :label="item.username"
                              :value="item.id" />
                      </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
      </div>
  </el-form>
      <el-table :data="page.records" @selection-change="handleSelectionChange" style="width: 1450px">
          <el-table-column type="selection" width="50" />
          <el-table-column prop="barCode" label="条码" width="80"/>
          <el-table-column prop="materialName" label="名称" width="250"/>
          <el-table-column prop="categoryName" label="类别" />
          <el-table-column prop="standard" label="规格" />
          <el-table-column prop="model" label="型号" />
          <el-table-column prop="color" label="颜色" />
          <el-table-column prop="commodityUnit" label="单位" />
          <el-table-column prop="sku" label="多属性" />
          <el-table-column prop="totalOperNumber" label="库存" />
          <el-table-column prop="mfrs" label="扩展信息" />
      </el-table>
      <!-- 分页组件 -->
      <el-pagination v-model:page-size="page.size" 
        v-model:current-page="page.current" 
        @current-change="loadMenus"
        @size-change="loadMenus" :page-sizes="[2, 4, 8, 10]" 
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" background style="float: right;margin-top: 10px;">
      </el-pagination>
      <!-- 按钮 -->
      <form>
        <el-row :gutter="20" style="height: 30px">
          <el-col :span="24" :offset="0">
            <el-form-item style="position: fixed;bottom: 225px; right: 370px;">
                <el-button @click="close">关闭</el-button>
                <el-button type="primary" @click="saveSelectedItems">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </form>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import request from '@/api/request';
import { ElMessage } from 'element-plus';
let linkText = ref('展开')
let isDivVisible = ref(false)
let purchase = ref({})
let emits = defineEmits(['saveSaleinorder', 'close']);

const page = ref({
  current: 1,
  size: 10,
  total: 0,
  records: []
});

//初始化
const loadMenus = () => {
  request({
      url: '/erpmaterialinventory/findByPage',
      method: "get",
      params: {
          current: page.value.current,
          size: page.value.size
      }
  }).then(res => {
      page.value.records = res.data.records;
      page.value.total = res.data.total;
  }).catch(err => {
      ElMessage.error('加载数据失败');
  });
};

//关闭弹框
let close = ()=>{
    emits('close')
}

//展开/收起
let ss =()=>{
    isDivVisible.value = !isDivVisible.value;
    linkText.value = isDivVisible.value ? '收起' : '展开'
}

const selectedItems = ref([]);
const saveSelectedItems = () => {
  if (selectedItems.value.length === 0) {
    ElMessage.warning('请至少选择一个商品');
    return;
  }
  emits('saveSaleinorder', selectedItems.value);
  close();
  console.log( selectedItems.value );
};  
const handleSelectionChange = (val) => {
  selectedItems.value = val;
};
loadMenus();
</script>

<style scoped>
a:hover {
    color: #40a9ff;
}

a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color .3s;
    -webkit-text-decoration-skip: objects;
}

.anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.anticon svg {
    display: inline-block;
}
</style>
